import { Button } from "antd";
import React, { Component } from "react";
import { Link, Route } from "react-router-dom";
import P1 from "./product/p1";
import P2 from "./product/p2";
import qs from "query-string";
export default class TestList extends Component {
  handleChild = (target) => {
    // 方法1：
    // this.props.history.push(`/test/list/${target}`);
    // 方法2：state参数在目标组件中刷新会丢失
    // this.props.history.push({
    //   pathname: `/test/list/${target}`,
    //   state: {
    //     num: 100,
    //     name: "三丰",
    //   },
    // });
    // 方法3:
    let obj = {
      num: 100,
      name: "三丰",
    };
    let query = qs.stringify(obj); //将对象处理为key=value&key1=value1格式的字符串
    this.props.history.push({
      pathname: `/test/list/${target}`,
      search: `?${query}`,
    });
  };
  render() {
    return (
      <div>
        <Link to="/test/detail/123">访问详情</Link>
        <h1>产品的总体介绍</h1>
        <Button
          type="primary"
          onClick={() => {
            this.handleChild("p1");
          }}
        >
          产品1
        </Button>
        <Button
          type="primary"
          onClick={() => {
            this.handleChild("p2");
          }}
        >
          产品2
        </Button>
        <Route path="/test/list/p1" component={P1} />
        <Route path="/test/list/p2" component={P2} />
      </div>
    );
  }
}
